import React from "react";
import "./index.css"
import Top from '../../components/top'
import { connect } from "react-redux"
import { useState, useEffect } from "react";
import axios from "axios";
import { withRouter } from "react-router-dom";
import { getUserInfo } from "../../api/userinfo"
import FoodAlert from './components/alert/index.js'
import { Sidebar, ActionSheet, ProductCard } from 'react-vant';
// import 'animate.css';
function Food(props) {
    const {title} = props.location.state
    const [user, setUser] = useState("getUserInfo")
    console.log(user);
    useEffect(() => {
        getUserInfo({ phone: '18234824645' }).then((res) => {
            setUser(res)
        })
        setTimeout(() => {

        }, 1000);
    }, [])
    let { cartList, addOne, subOne, delOne, addCart } = props
    cartList = cartList || []
    console.log(cartList)
    // 返回总的数量
    const getTotalCount = cartList.reduce((pre, cur) => pre + cur.count, 0)
    console.log(getTotalCount)
    // 返回总的金额
    const getTotalAmount = cartList.reduce((pre, cur) => pre + cur.count * cur.price, 0)
    let [datas, setDatas] = useState("")
    const [visible, setVisible] = useState(false)
    const [value8, setValue8] = useState(0)
    const onCancel = () => setVisible(false)
    const [active, setActive] = useState(0);
    let state = {
        index: 0, // 用来保存左侧选中的菜单项的序号
        scroll: 0,
    }
    useEffect(() => {
        axios.get('/data/goods.json')
            .then(datas => {
                setDatas(datas.data)
            });
    }, [])
    datas = datas || []


    return (
        <div className="food">
            <Top title='鱼酷'></Top>
            <FoodAlert></FoodAlert>

            <div className="food-main">
                <div className="food-nav">
                    <img src="/img/yudian/shop.jpg" alt="" />
                    <span className="left">{title}</span>
                    <span className="right">预点餐</span>
                </div>

                <div className="food-content">
                    <div className="food-table" style={{ height: state.scroll === 0 ? "" : "0px" }}>
                        <div className="food-tableTop">
                            <img src="/img/yudian/双人餐套餐.png" alt="" />
                        </div>
                        <div className="food-tableBottom">
                            <div className="food-tableLeft">
                                <p className="title">加入锦鲤会员</p>
                                <p className="con">即得6斤免费蛔鱼，本单立减65.88元</p>
                                <button onClick={() => props.history.push('/Member')}>立即开通</button>
                            </div>
                            <div className="food-tableRight">
                                <p className="title">我的优惠券</p>
                                <div className="con">
                                    <span>{user[0].coupons}</span>张
                                    <button
                                        onClick={() => { props.history.push("/Car") }}>查看&nbsp;&gt;</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="food-list">
                        <Sidebar
                            value={active}
                            onChange={(v) => {
                                setActive(v);
                            }}
                        >{
                                datas.map((d, i) => {
                                    if (d.id <= 2) {
                                        return (
                                            <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title={d.title} key={i}>
                                                {
                                                    <div  >
                                                        <h3>{d.title}</h3>
                                                        <div className="food-rightT">

                                                            {
                                                                d.goods.map((item, id) => {
                                                                    return (
                                                                        <div key={id} className="fooder">
                                                                            <img src={item.pic} alt="" />
                                                                            <button className="food-Button">选鱼</button>
                                                                        </div>

                                                                    )
                                                                })

                                                            }
                                                        </div>
                                                    </div>

                                                }
                                            </Sidebar.Item>
                                        )
                                    } else {
                                        return (
                                            <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title={d.title} key={i}>
                                                <div className="food-rightT ">
                                                    <h3>{d.title}</h3>
                                                    {
                                                        d.goods.map((item, id) => {
                                                            return (
                                                                <div className="food-rightC" key={id}>
                                                                    <div>
                                                                        <img src={item.pic} alt="" className="food-rightL"></img>
                                                                    </div>
                                                                    <div className="food-rightR">
                                                                        <p>{item.name}</p>
                                                                        <div className="food-rightB">
                                                                            ￥<span>{item.price}</span>
                                                                            <div className='demo'>

                                                                                <span
                                                                                    onClick={() => addCart(item)}
                                                                                >+</span>
                                                                            </div>
                                                                        </div>

                                                                    </div>
                                                                </div>

                                                            )
                                                        })
                                                    }
                                                </div>

                                            </Sidebar.Item>
                                        )

                                    }

                                })
                            }
                        </Sidebar>

                    </div>
                </div>
            </div>
            <div className="food-bottom">
                <div className="yu" onClick={() => setVisible(true)}>
                    <img src='/img/yudian/预订单.png' alt='' />
                    <ActionSheet visible={visible} onCancel={onCancel} className='visible'>
                        <div style={{ padding: '16px 16px 90px' }} >
                            <div className="sible-top">
                                <p className="left">
                                    <span className="iconfont">&#xe637;</span>
                                    <span>我的购物车</span>
                                </p>
                                <p className="right">
                                    <span 
                                      onClick={() => {delOne()
                                        setVisible(false)}}>
                                        清空</span>
                                    <span className="iconfont"></span>
                                </p>
                            </div>
                            <div style={{height:'300rem',overflowY:'auto'}}>
                                {
                                    cartList.map((d, i) => {
                                        return (
                                            <div>
                                            <ProductCard
                                                
                                                key={i}
                                                num={d.count}
                                                price={d.price}
                                                
                                                title={d.name}
                                                thumb={d.pic}
                                                footer={
                                                    <div className="alertMeal">
                                                        <button
                                                            onClick={() => subOne(d)}
                                                            style={{border:'none',padding:'0 10rem'}}
                                                            >
                                                            -
                                                        </button>
                                                        <span style={{margin:'0 10rem'}}>{d.count}</span>
                                                        <button
                                                            onClick={() => addOne(d)}
                                                            style={{border:'none',padding:'0 10rem'}}
                                                            >
                                                            +
                                                        </button>
                                                    </div>
                                                }
                                            />
                                            </div>

                                        )
                                    })
                                }

                            </div>
                            <div className="food-joinVIP">
                                <div>
                                    <p className="title">加入锦鲤会员</p>
                                    <p className="con">即得6斤免费蛔鱼，本单立减65.88元</p>
                                </div>
                                <button>立即开通</button>
                            </div>
                        </div>
                    </ActionSheet>

                </div>

                <div className="di">
                    <div className="nav-left">
                        <span>{getTotalCount}件</span>
                    </div>
                    <div className="nav-right" style={getTotalCount === 0 ? {} : { backgroundColor: "red" }}>
                        <span
                            onClick={getTotalCount === 0 ? console.log(getTotalCount) :() => {  props.history.push("/Sure") }}>选好了</span>
                    </div>
                </div>
            </div>

        </div>
    )
}
export default withRouter(
    connect(
        (state) => ({ cartList: state.cart }),
        (dispatch) => ({
            addCart: (d) => dispatch({ type: "ADD_CART", data: [d] }),
            addOne: (id) => dispatch({ type: "ADD_ONE", data: { id: id } }),
            subOne: (id) => dispatch({ type: "SUB_ONE", data: { id: id } }),
            delOne: () => dispatch({ type: "DEL_CART", data: [] }),
        })
    )(Food))